// 导入Vue
import Vue from 'vue'
// 导入Vuex
import Vuex from 'vuex'
// 安装Vuex
Vue.use(Vuex)

export default new Vuex.Store({
  // 开启严格模式
  strict: true,
  // state:状态
  // 状态就是数据，所以顾名思义state就是放数据的地方
  state: {
    // 在state里声明的数据，所有组件都能访问
    count: 10,
    xx: 'zz',
    // 购物车数据
    list: []
  },
  getters: {},
  // 放方法的地方,而且这也是唯一允许修改state的地方
  mutations: {
    // 提供一个修改购物车数据的方法
    changeList (state, list) {
      state.list = list
    },
    // 所以如果你要改count，你就要在mutations里提供一个方法，在这个方法里修改count
    // mutations里的方法有一个固定的形参，叫state
    // 这个state就是当前vuex对象里的state
    countPlusPlus (state) {
      state.count++
    },

    // 第二个参数：外界传入的数据
    // 也就是说最多只能传1个额外的参数
    addCount (state, num, num2) {
      // console.log(num, num2) // 10 undefined
      state.count += num
    }
  },

  // 它也是放方法的地方，但是这些方法里可以写异步代码
  actions: {
    // 参数1：固定的叫context可以简写为ctx,代表当前vuex对象
    // actions和mutations一样也能接收一个额外参数
    updateCount (ctx, num) {
      console.log(num) // 999
      // 在actions里发请求获取数据
      // 然后再调用mutations里的方法去吧请求到的数据修改到state
      setTimeout(() => {
        // 也让count++
        ctx.commit('countPlusPlus')
      }, 1000)
    },

    updateList (ctx) {

      setTimeout(() => {
        // 假设setTimeout模拟发请求
        // 假设返回了一个数组
        const list = ['苹果','香蕉','西瓜']
        ctx.commit('changeList', list)

      }, 1500);
    }
  },
  modules: {}
})
